<template>
  <div>
    <BasicModal
      :showCancelBtn="false"
      :showOkBtn="false"
      :title="`${$t('routes.commission.commissionDetail')} (${getDatailTitle})`"
      @register="registerSend"
      :width="800"
    >
      <div>
        <Card class="commision-style">
          <CardGrid
            class="cardGrade !text-center !p-t-6"
            :hoverable="false"
            style="background-color: #40567a"
          >
            <div>
              <div
                >{{ $t('table.system.system_rebate_rate1') }}
                <Tooltip placement="right">
                  <template #title>
                    <div
                      ><span class="fac">{{ $t('table.system.system_rebate_rate1') }}：</span
                      >{{ $t('table.system.commsision_tip_1') }}</div
                    >
                  </template>
                  <Icon icon="tabler:bulb" />
                </Tooltip>
              </div>
              <div>
                <CountTo
                  class="text-2xl font-700"
                  :startVal="0"
                  :endVal="Number(mul(resultListDetail.commission_direct_rate, 100))"
                  suffix="%"
                />
              </div>
            </div>
          </CardGrid>
          <CardGrid
            class="cardGrade !text-center"
            :hoverable="false"
            style="background-color: #158367"
          >
            <div>
              <div
                >{{ $t('table.system.system_direct_commission')
                }}<Tooltip placement="right">
                  <template #title>
                    <div
                      ><span class="fac">{{ $t('table.system.system_direct_commission') }}：</span
                      >{{ $t('table.system.commsision_tip_0') }}</div
                    >
                    <div
                      ><span class="fac">{{ $t('table.system.performance') }}：</span
                      >{{ $t('table.system.commsision_tip_2') }}
                    </div>
                  </template>
                  <Icon icon="tabler:bulb" /> </Tooltip
              ></div>
              <CountTo
                :startVal="0"
                class="text-2xl font-700"
                :decimals="2"
                :endVal="Number(resultListDetail.commission_amount_direct)"
              />
              <div
                >{{ $t('table.system.performance') }}：<CountTo
                  :startVal="0"
                  :decimals="2"
                  :endVal="Number(resultListDetail.valid_bet_amount_direct)"
              /></div>
            </div>
          </CardGrid>
          <CardGrid class="cardGrade" :hoverable="false" style="background-color: #845ec1">
            <div>
              <div
                >{{ $t('table.system.system_other_commission')
                }}<Tooltip placement="right">
                  <template #title>
                    <div
                      ><span class="fac">{{ $t('table.system.system_other_commission') }}：</span
                      >{{ $t('table.system.commsision_tip_3') }}</div
                    >
                    <div
                      ><span class="fac">{{ $t('table.system.performance') }}：</span
                      >{{ $t('table.system.commsision_tip_4') }}</div
                    >
                  </template>
                  <Icon icon="tabler:bulb" /> </Tooltip
              ></div>
              <CountTo
                :startVal="0"
                :decimals="2"
                class="text-2xl font-700"
                :endVal="Number(resultListDetail.commission_amount_other)"
              />
              <div>
                {{ $t('table.system.performance') }}：
                <CountTo
                  :startVal="0"
                  :decimals="2"
                  :endVal="Number(resultListDetail.valid_bet_amount_other)"
                />
              </div>
            </div>
          </CardGrid>
          <CardGrid class="cardGrade" :hoverable="false" style="background-color: #40567a">
            <div>
              <div
                >{{ t('business.common_super_agent')
                }}<Tooltip placement="right">
                  <template #title>
                    <div
                      ><span class="fac">{{ t('business.common_super_agent') }}：</span
                      >{{ $t('table.system.commsision_tip_5') }}</div
                    >
                    <div
                      ><span class="fac">{{ $t('table.system.system_rebate_rate1') }}：</span
                      >{{ $t('table.system.commsision_tip_6') }}</div
                    >
                  </template>
                  <Icon icon="tabler:bulb" /> </Tooltip
              ></div>
              <span class="text-2xl font-700">{{ resultListDetail.parent_name }}</span>
              <div
                >{{ $t('table.system.system_rebate_rate1') }}：
                <CountTo
                  :startVal="0"
                  :endVal="Number(mul(resultListDetail.parent_commission_direct_rate, 100))"
                  suffix="%"
              /></div>
            </div>
          </CardGrid>
          <CardGrid class="cardGrade" :hoverable="false" style="background-color: #158367">
            <div>
              <div
                >{{ $t('table.system.contribution_amount_self')
                }}<Tooltip placement="right">
                  <template #title>
                    <div
                      ><span class="fac">{{ t('table.system.contribution_amount_self') }}：</span
                      >{{ $t('table.system.commsision_tip_7') }}</div
                    >
                    <div
                      ><span class="fac">{{ $t('table.system.valid_bet_amount_self') }}：</span
                      >{{ $t('table.system.commsision_tip_8') }}</div
                    >
                  </template>
                  <Icon icon="tabler:bulb" /> </Tooltip
              ></div>
              <CountTo
                :startVal="0"
                :decimals="2"
                class="text-2xl font-700"
                :endVal="Number(resultListDetail.contribution_amount_self)"
              />
              <div>
                {{ $t('table.system.valid_bet_amount_self') }}
                ：
                <CountTo
                  :startVal="0"
                  :decimals="2"
                  :endVal="Number(resultListDetail.valid_bet_amount_self)"
                />
              </div>
            </div>
          </CardGrid>
          <CardGrid class="cardGrade" :hoverable="false" style="background-color: #845ec1">
            <div>
              <div
                >{{ $t('table.system.contribution_amount_other') }}
                <Tooltip placement="right">
                  <template #title>
                    <div
                      ><span class="fac">{{ $t('table.system.contribution_amount_other') }}：</span
                      >{{ $t('table.system.commsision_tip_9') }}</div
                    >
                    <div
                      ><span class="fac">{{ $t('table.system.team_record') }}：</span
                      >{{ $t('table.system.commsision_tip_10') }}</div
                    >
                  </template>
                  <Icon icon="tabler:bulb" /></Tooltip
              ></div>
              <CountTo
                :startVal="0"
                :decimals="2"
                class="text-2xl font-700"
                :endVal="Number(resultListDetail.contribution_amount_other)"
              />
              <div>
                {{ $t('table.system.team_record') }}：<CountTo
                  :decimals="2"
                  :endVal="Number(resultListDetail.contribution_valid_bet_amount_other)"
                />
              </div>
            </div>
          </CardGrid>
        </Card>
        <!-- <Loading :loading="loading" :absolute="true" /> -->
      </div>
      <BasicTable @register="registerTableDetail">
        <template #summary>
          <TableSummary v-if="getList">
            <TableSummaryRow>
              <TableSummaryCell class="!text-center !text-sm" :index="0">{{
                $t('business.common_total')
              }}</TableSummaryCell>
              <TableSummaryCell class="!text-center !text-sm" :index="0"> - </TableSummaryCell>
              <TableSummaryCell class="!text-center !text-sm" :index="0"> - </TableSummaryCell>
              <TableSummaryCell class="!text-center !text-sm" :index="0">
                {{ totleData.valid_bet_amount_self }}
              </TableSummaryCell>
              <TableSummaryCell class="!text-center !text-sm" :index="0">
                {{ totleData.contribution_amount }}
              </TableSummaryCell>
            </TableSummaryRow>
          </TableSummary>
        </template>
      </BasicTable>
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
  import { BasicModal, useModalInner, FormSchema } from '/@/components/Modal';
  import { getDetailRecordList } from '/@/api/commission/index';
  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
  import { ref, h } from 'vue';
  import { Loading } from '/@/components/Loading';
  import {
    Card,
    CardGrid,
    Tooltip,
    TableSummary,
    TableSummaryRow,
    TableSummaryCell,
  } from 'ant-design-vue';
  import { CountTo } from '@/components/CountTo';
  import Icon from '@/components/Icon/Icon.vue';
  import { useFormSetting } from '/@/hooks/setting/useFormSetting';
  import { mul } from '/@/utils/number';
  import { currentyOptions } from '/@/views/common/commonSetting';
  import { useI18n } from '/@/hooks/web/useI18n';
  import cdBlockCurrency from '/@/components-cd/block/cd-block-currency.vue';

  const { t } = useI18n();
  const FORM_SIZE = useFormSetting().getFormSize;
  const loading = ref(false as any);
  const columns: BasicColumn[] = [
    {
      title: t('business.common_currency'), //币种
      dataIndex: 'currency_id',
      minWidth: 80,
      customRender: ({ record }) =>
        h(cdBlockCurrency, { currencyName: currentyOptions[record.currency_id] }),
    },
    {
      title: t('business.common_member_account'),
      dataIndex: 'username',
      minWidth: 100,
    },
    {
      title: t('business.common_super_agent'),
      dataIndex: 'parent_name',
      minWidth: 100,
    },
    {
      title: t('table.system.valid_bet_amount_self'),
      dataIndex: 'valid_bet_amount_self',
      minWidth: 100,
    },
    {
      title: t('table.system.contribution_amount_self'), //贡献佣金
      dataIndex: 'contribution_amount',
      minWidth: 100,
      helpMessage: `<div><span style="color: #facd91">${t(
        'table.system.contribution_amount_self',
      )}：</span>${t('table.system.commsision_tip_11')}</div>`,
    }, //当前会员给当前代理贡献的佣金
  ];
  const searchFormSchema: FormSchema[] = [
    {
      field: 'selectType',
      component: 'Select',
      label: '',
      colProps: { span: 4, class: 'm-l-275px' },
      defaultValue: 'username',
      componentProps: {
        allowClear: false,
        options: [
          {
            label: t('business.common_member_account'),
            value: 'username',
          },
          {
            label: t('business.common_super_agent'),
            value: 'parent_name',
          },
        ],
      },
    },
    {
      field: 'selectValue',
      component: 'Input',
      label: '',
      colProps: { span: 8 },
    },
  ];
  const getDetailId = ref('' as any);
  const resultListDetail = ref({
    commission_direct_rate: '0',
    commission_amount_direct: '0',
    commission_amount_other: '0',
    parent_name: '-',
    contribution_amount_other: '0',
    contribution_amount_self: '0',
    valid_bet_amount_self: '0',
    parent_commission_direct_rate: '0',
  } as any);
  const getList = ref([] as any);
  const getDatailTitle = ref('' as any);
  const totleData = ref({ valid_bet_amount_self: '0.00', contribution_amount: '0.00' } as any);

  const [registerTableDetail, { reload, getForm }] = useTable({
    //api: getDetailRecordList,
    api: async () => {
      const params = {
        id: getDetailId.value,
        page: 1,
        page_size: 25,
      };
      const values = getForm().getFieldsValue();
      params[values.selectType] = values.selectValue;
      const { data, status } = await getDetailRecordList(params);
      let list = [];
      //console.log(data.detail.c);
      if (status) {
        resultListDetail.value = data.total;
        loading.value = false;
        list = data?.detail?.d;
        getList.value = data?.detail?.d;
        totleData.value = data?.detail?.c[0];
      }
      //console.log(data);
      return list;
    },
    immediate: false,
    showIndexColumn: false,
    useSearchForm: true,
    bordered: true,
    columns,
    formConfig: {
      actionColOptions: {
        class: 't-form-label-com m-l-25px',
        span: 1,
      },
      showResetButton: false,
      schemas: searchFormSchema,
      size: FORM_SIZE,
    },
    // beforeFetch: (params) => {
    //   params[params.useracount] = params.selectValue;
    // },
  });
  const [registerSend] = useModalInner((data) => {
    getDetailId.value = data.data.id;
    getForm().resetFields();
    getDatailTitle.value = data?.data?.username;
    reload();
    loading.value = true;
  });
</script>

<style scoped>
  .commision-style .ant-card-grid {
    padding: 10px;
    height: 90px;
  }
  .commision-style .cardGrade {
    text-align: center;
    color: #fff;
  }
  .fac {
    color: #facd91;
  }
</style>
